<template>
  <div class="container">
    <el-select
      v-model="selectedImagePoi"
      @change="createImagePoi"
      placeholder="选择图片POI样式"
      size="large"
      style="width: 155px"
    >
      <el-option
        v-for="item in imagePoiOptions"
        :key="item.id"
        :label="item.name"
        :value="item.url"
      />
    </el-select>

    <el-select
      v-model="selected3DPoi"
      @change="create3DPoi"
      placeholder="选择3DPOI样式"
      size="large"
      style="width: 155px"
    >
      <el-option
        v-for="item in poi3DOptions"
        :key="item.id"
        :label="item.name"
        :value="item.mode"
      />
    </el-select>

    <el-select
      v-model="selected2DPoi"
      @change="create2DPoi"
      placeholder="选择2DPOI样式"
      size="large"
      style="width: 155px"
    >
      <el-option
        v-for="item in poi2DOptions"
        :key="item.id"
        :label="item.name"
        :value="item.mode"
      />
    </el-select>

    <el-select
      v-model="selectedHuman"
      @change="createESHuman"
      placeholder="选择人员创建"
      size="large"
      style="width: 155px"
    >
      <el-option v-for="item in humanOptions" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>

    <el-select
      v-model="selectedHumanPoi"
      @change="createESHumanPoi"
      placeholder="选择人员Poi创建"
      size="large"
      style="width: 155px"
    >
      <el-option
        v-for="item in humanPoiOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>

    <el-button type="primary" @click="createESCar">创建车辆</el-button>
    <el-button type="primary" @click="createDiv">自定义Div</el-button>
    <el-button type="primary" @click="createESGltfModel">glb创建模型</el-button>
    <el-button type="primary" @click="createESTextLabel">文字标签</el-button>
    <el-select
      v-model="selectedSkyBox"
      @change="createESLocalSkyBox"
      placeholder="选择天空盒"
      size="large"
      style="width: 155px"
    >
      <el-option
        v-for="item in skyBoxOptions"
        :key="item.id"
        :label="item.name"
        :value="item.mode"
      />
    </el-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  ESImageLabel,
  ESPoi3D,
  ESPoi2D,
  ESHuman,
  ESHumanPoi,
  ESCar,
  ESGeoDiv,
  ESGltfModel,
  ESLocalSkyBox,
  ESTextLabel,
} from 'earthsdk3'

const props = defineProps({
  objm: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['poi-created'])

// 图片POI选项
const imagePoiOptions = [
  {
    id: '1',
    name: '蓝色相机',
    url: 'inner://CameraBlue.png',
  },
  {
    id: '2',
    name: '绿色相机',
    url: 'inner://CameraGreen.png',
  },
  {
    id: '3',
    name: '蓝色车辆',
    url: 'inner://CarBlue.png',
  },
  {
    id: '4',
    name: '红色车辆',
    url: 'inner://CarRed.png',
  },
  {
    id: '5',
    name: '渡口',
    url: 'inner://Dukou.png',
  },
  {
    id: '6',
    name: '界限',
    url: 'inner://Jiexian.png',
  },
  {
    id: '7',
    name: '警示',
    url: 'inner://Jingshi.png',
  },
  {
    id: '8',
    name: '蓝色料斗',
    url: 'inner://LiaodouBlue.png',
  },
  {
    id: '9',
    name: '红色料斗',
    url: 'inner://LiaodouRed.png',
  },

  {
    id: '10',
    name: '龙门吊蓝色',
    url: 'inner://LongmendiaoBlue.png',
  },
  {
    id: '11',
    name: '龙门吊红色',
    url: 'inner://LongmendiaoRed.png',
  },
  {
    id: '12',
    name: '锚',
    url: 'inner://Mao.png',
  },
  {
    id: '13',
    name: '蓝色门机',
    url: 'inner://MenjiBlue.png',
  },
  {
    id: '14',
    name: '红色门机',
    url: 'inner://MenjiRed.png',
  },
  {
    id: '15',
    name: '蓝色人员',
    url: 'inner://RenyuanBlue.png',
  },
  {
    id: '16',
    name: '红色人员',
    url: 'inner://RenyuanRed.png',
  },
  {
    id: '17',
    name: '蓝色圆形人员',
    url: 'inner://RenyuanCircleBlue.png',
  },
  {
    id: '18',
    name: '红色圆形人员',
    url: 'inner://RenyuanCircleRed.png',
  },
]

// 3D POI选项
const poi3DOptions = [
  {
    id: '1',
    name: '三角形',
    mode: 'triangle',
  },
  {
    id: '2',
    name: '菱形',
    mode: 'diamond',
  },
]

// 2D POI选项
const poi2DOptions = [
  {
    id: '1',
    name: '方形H1',
    mode: 'SquareH01',
  },
  {
    id: '2',
    name: '方形H2',
    mode: 'SquareH02',
  },
  {
    id: '3',
    name: '方形V1',
    mode: 'SquareV01',
  },
  {
    id: '4',
    name: '方形V2',
    mode: 'SquareV02',
  },
  {
    id: '5',
    name: '方形V3',
    mode: 'SquareV03',
  },
  {
    id: '6',
    name: '方形V4',
    mode: 'SquareV04',
  },

  {
    id: '7',
    name: '旗帜1',
    mode: 'Flag01',
  },
  {
    id: '8',
    name: '旗帜2',
    mode: 'Flag02',
  },

  {
    id: '9',
    name: '线形1',
    mode: 'Linear01',
  },
  {
    id: '10',
    name: '线形2',
    mode: 'Linear02',
  },
  {
    id: '11',
    name: '线形3',
    mode: 'Linear03',
  },
  {
    id: '12',
    name: '圆形H1',
    mode: 'CircularH01',
  },
  {
    id: '13',
    name: '圆形H2',
    mode: 'CircularH01',
  },

  {
    id: '14',
    name: '圆形V1',
    mode: 'CircularV01',
  },
  {
    id: '15',
    name: '圆形V2',
    mode: 'CircularV02',
  },
  {
    id: '16',
    name: '圆形V3',
    mode: 'CircularV03',
  },
  {
    id: '17',
    name: '圆形V4',
    mode: 'CircularV04',
  },
  {
    id: '18',
    name: '圆形V5',
    mode: 'CircularV05',
  },

  {
    id: '19',
    name: '圆形H1',
    mode: 'P3D01',
  },
  {
    id: '20',
    name: '圆形H2',
    mode: 'P3D02',
  },
  {
    id: '21',
    name: '圆形H3',
    mode: 'P3D03',
  },
  {
    id: '22',
    name: '圆形H4',
    mode: 'P3D04',
  },
  {
    id: '23',
    name: '圆形H5',
    mode: 'P3D05',
  },
  {
    id: '24',
    name: '圆形H6',
    mode: 'P3D06',
  },
  {
    id: '25',
    name: '圆形H7',
    mode: 'P3D07',
  },
  {
    id: '26',
    name: '菱形H1',
    mode: 'Diamond01',
  },
  {
    id: '27',
    name: '菱形H2',
    mode: 'Diamond02',
  },

  {
    id: '28',
    name: '人物1',
    mode: 'Stranger',
  },
  {
    id: '29',
    name: '人物2',
    mode: 'ManNormal',
  },
  {
    id: '30',
    name: '人物3',
    mode: 'ManAbnormal',
  },
  {
    id: '31',
    name: '人物4',
    mode: 'WomanNormal',
  },
  {
    id: '32',
    name: '人物5',
    mode: 'WomanAbnormal',
  },
]

const humanOptions = [
  {
    id: '1',
    name: '工人',
    mode: 'worker',
    animation: 'running', //奔跑
  },
  {
    id: '2',
    name: '警察',
    mode: 'police',
    animation: 'running', //奔跑
  },
  {
    id: '3',
    name: '路人',
    mode: 'pedestrian',
    animation: 'walking', //行走
  },
  {
    id: '4',
    name: '陌生人',
    mode: 'stranger',
    animation: 'walking', //行走
  },
  {
    id: '5',
    name: '男士',
    mode: 'suitMan',
    animation: 'standing', //站立
  },
  {
    id: '6',
    name: '女士',
    mode: 'suitWoman',
    animation: 'standing', //站立
  },
]

const humanPoiOptions = [
  {
    id: '1',
    name: '工人-方形H',
    mode: 'worker',
    animation: 'running', //奔跑
    poiMode: 'SquareH01', //方形H
  },
  {
    id: '2',
    name: '警察-方形V',
    mode: 'police',
    animation: 'running', //奔跑
    poiMode: 'SquareV01', //方形V
  },
  {
    id: '3',
    name: '路人-旗帜',
    mode: 'pedestrian',
    animation: 'walking', //行走
    poiMode: 'Flag01', //旗帜
  },
  {
    id: '4',
    name: '陌生人-线形',
    mode: 'stranger',
    animation: 'walking', //行走
    poiMode: 'Linear01', //线形
  },
  {
    id: '5',
    name: '男士-圆形H',
    mode: 'suitMan',
    animation: 'standing', //站立
    poiMode: 'P3D01', //圆形H
  },
  {
    id: '6',
    name: '女士-菱形 H',
    mode: 'suitWoman',
    animation: 'standing', //站立
    poiMode: 'Diamond01', //菱形 H
  },
]

// 天空盒
const skyBoxOptions = [
  {
    id: '1',
    name: 'baiyun',
    mode: 'baiyun',
  },
  {
    id: '2',
    name: 'blueSky',
    url: 'blueSky',
  },
  {
    id: '3',
    name: 'clearSky',
    url: 'clearSky',
  },
  {
    id: '4',
    name: 'dream',
    mode: 'dream',
  },
  {
    id: '5',
    name: 'starrySky',
    url: 'starrySky',
  },
  {
    id: '6',
    name: 'sunnySky',
    url: 'sunnySky',
  },
  {
    id: '7',
    name: 'sunSets',
    url: 'sunSets',
  },
]
const selectedSkyBox = ref('')
const selectedImagePoi = ref('')
const selected3DPoi = ref('')
const selected2DPoi = ref('')
const selectedHuman = ref('')
const humanData = ref([])
const selectedHumanPoi = ref('')
const humanPoiData = ref([])

const carData = ref([])
const createImagePoi = (url) => {
  const poi = props.objm.createSceneObject(ESImageLabel)
  if (!poi) return
  poi.url = url
  poi.editing = true
  // 监听widgetEvent事件   图片对象被拾取事件
  poi.allowPicking = true //允许被拾取
  poi.widgetEvent.don((e) => {
    console.log('widgetEvent信息', e, '拾取的可视化对象', poi.name)
    switch (e.type) {
      // case 'mouseEnter':
      //   alert('鼠标进入!')
      //   break
      // case 'mouseLeave':
      //   alert('鼠标移出!')
      //   break
      case 'leftClick':
        console.log(poi.name, '被鼠标左键点击')
        break
      case 'rightClick':
        console.log(poi.name, '被鼠标右键点击')
        break
      default:
        break
    }
  })
  emit('poi-created', { type: 'image', instance: poi })
  // 创建完成后清空选择
  selectedImagePoi.value = ''
}

const create3DPoi = (mode) => {
  const poi = props.objm.createSceneObject(ESPoi3D)
  if (!poi) return
  poi.mode = mode
  poi.editing = true
  emit('poi-created', { type: '3d', instance: poi })
  // 创建完成后清空选择
  selected3DPoi.value = ''
}

const create2DPoi = (mode) => {
  const poi = props.objm.createSceneObject(ESPoi2D)
  if (!poi) return
  poi.mode = mode
  poi.editing = true
  emit('poi-created', { type: '2d', instance: poi })
  // 创建完成后清空选择
  selected2DPoi.value = ''
}

const createESHuman = (value) => {
  const selectedHumen = humanOptions.find((item) => item.id === value)
  if (!selectedHumen) return
  const human = props.objm.createSceneObject(ESHuman)
  if (!human) return
  human.mode = selectedHumen.mode
  human.animation = selectedHumen.animation
  human.scale = [20, 20, 20]
  human.editing = true
  humanData.value.push(human)
  emit('poi-created', { type: 'human', instance: human, humanArr: humanData.value })
  // 创建完成后清空选择
  selectedHuman.value = ''
}

const createESHumanPoi = (value) => {
  const selectedHumenPoi = humanPoiOptions.find((item) => item.id === value)
  if (!selectedHumenPoi) return
  const humanPoi = props.objm.createSceneObject(ESHumanPoi)
  if (!humanPoi) return
  humanPoi.mode = selectedHumenPoi.mode
  humanPoi.animation = selectedHumenPoi.animation
  humanPoi.poiMode = selectedHumenPoi.poiMode
  humanPoi.editing = true
  humanPoiData.value.push(humanPoi)
  emit('poi-created', { type: 'humanPoi', instance: humanPoi, humanPoiArr: humanPoiData.value })
  selectedHumanPoi.value = ''
}

const createESCar = () => {
  const car = props.objm.createSceneObject(ESCar)
  if (!car) return
  car.mode = 'policeCar' //警车模型 (仅有)
  car.scale = [20, 20, 20] //缩放
  car.editing = true
  carData.value.push(car)
  emit('poi-created', { type: 'car', instance: car, carArr: carData.value })
}
//自定义盒子
const createDiv = () => {
  const createESGeoDiv = props.objm.createSceneObject(ESGeoDiv)
  if (!createESGeoDiv) return
  createESGeoDiv.innerHTML = `
  <div style="background-color: white; padding: 10px; border-radius: 5px;white-space: normal; word-break: normal;">
    <h3 style="margin: 0; color: #333;">北京市</h3>
  </div>
`
  createESGeoDiv.editing = true
}

/**
 * 创建并加载3D模型到场景
 */
const createESGltfModel = () => {
  // 创建GLTF模型场景对象
  const sceneObjectESGltfModel = props.objm.createSceneObject(ESGltfModel)
  if (!sceneObjectESGltfModel) return // 如果创建失败则退出
  // 设置模型URL
  sceneObjectESGltfModel.url = '/public/36.glb'
  // 启用编辑模式，允许用户调整模型位置和属性
  sceneObjectESGltfModel.editing = true
}
//天空盒
const createESLocalSkyBox = (mode) => {
  const sceneObjectESLocalSkyBox = props.objm.createSceneObject(ESLocalSkyBox)
  if (!sceneObjectESLocalSkyBox) return
  sceneObjectESLocalSkyBox.mode = mode
  sceneObjectESLocalSkyBox.size = 10000
  sceneObjectESLocalSkyBox.autoFollow = true
  sceneObjectESLocalSkyBox.editing = true
}

//文字标签
const createESTextLabel = () => {
  const sceneObjectESTextLabel = props.objm.createSceneObject(ESTextLabel)
  if (!sceneObjectESTextLabel) return
  sceneObjectESTextLabel.text = '文字标签'
  sceneObjectESTextLabel.color = [1, 0, 1, 1]
  sceneObjectESTextLabel.fontSize = 20
  //以下属性仅支持Cesium，不支持UE
  sceneObjectESTextLabel.backgroundColor = [0, 0, 0, 0.5] //背景颜色【指定文本标签的背景颜色】
  sceneObjectESTextLabel.textEditing = true //文本编辑
  sceneObjectESTextLabel.textEditingInteraction = true //文本编辑交互
  
  sceneObjectESTextLabel.editing = true
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 80px;
  left: 10px;
  width: 340px;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(29, 37, 45, 0.8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  button {
    width: 155px;
    height: 40px;
    margin: 0;
  }
}
</style>
